<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #container{
			width: 80%;
			height: 600px;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script src="../move.js"></script>
<script>
        class Fire{
            constructor(ops){
                this.ops = ops;
                this.createEle();
            }
            createEle(){
                this.ele = document.createElement("div");
                this.ele.className = "fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.ops.x + "px";
                this.ops.cont.appendChild(this.ele);
                this.move()
            }
            move(){
                move(this.ele, {
                    top: this.ops.y
                },()=>{
                    this.ele.remove()
                    const num = random(10, 20);
                    // 创建小烟花之前提前准备半径
                    const r = random(100, 200);
                    for(let i=0;i<num;i++){
                        // 创建小烟花时，将小烟花的数量，半径，索引，都传入
                        new SmallFire({
                            cont:this.ops.cont,
                            x:this.ops.x,
                            y:this.ops.y,
                            num:num,
                            r:r,
                            i:i
                        });
                    }
                })
            }
        }

        class SmallFire{
            constructor(ops){
                this.ops = ops;
                this.createEle()
            }
            createEle(){
                this.ele = document.createElement("div");
                this.ele.className = "small-fire";
                this.ele.style.background = randomColor();
                this.ele.style.left = this.ops.x + "px";
                this.ele.style.top = this.ops.y + "px";
                this.ops.cont.appendChild(this.ele);
                this.move()
            }
            move(){
                // 计算每个小烟花的当前度数
                const now = (360 / this.ops.num) * this.ops.i;
                
                // 根据三角函数，计算每个小烟花的目标位置（圆上的某一点）
                const x = parseInt(Math.cos( now / (180 / Math.PI) ) * this.ops.r + this.ops.x);
                const y = parseInt(Math.sin( now / (180 / Math.PI) ) * this.ops.r + this.ops.y);

                move(this.ele,{
                    left:x,
                    top:y
                },()=>{
                    this.ele.remove();
                })
            }
        }

        const cont = document.getElementById("container");
        cont.onclick = function(eve){
            const e = eve || window.event;
            new Fire({
                x: e.offsetX,
                y: e.offsetY,
                cont: this
            });
        }


    function random(a,b){
        return Math.round(Math.random()*(a-b)+b);
    }
    function randomColor(){
        return `rgb(${random(100,255)},${random(100,255)},${random(100,255)})`;
    }
</script>
</html>